<template>
  <div>
    <el-table :data="media.streamPushInfo.chs"  style="width: 100%"  @row-click='handleCurrentChanges' highlight-current-row>
      <el-table-column
        label="ID"
        prop="index">
      </el-table-column>
      <el-table-column
       :label="$t('message.medias.url')"
        prop="url">
      </el-table-column>
      <el-table-column  :label="$t('message.medias.reconnect')" >
        <template  slot-scope="scope">   
          <span>{{scope.row.reconnect? $t('message.yes') : $t('message.no') }}</span>
        </template> 
      </el-table-column> 
      <el-table-column  :label="$t('message.medias.status')" align="center">
        <template  slot-scope="scope">   
          <span>{{ scope.row.status ? scope.row.status : 'idle'  }}</span>
        </template> 
      </el-table-column> 
      <el-table-column  :label="$t('message.medias.operation')" width="120px" fixed="right">
        <template  slot-scope="scope">   
          <el-button  type="text" v-show="scope.row.url" @click="onResetUrl(scope.row)">{{$t('message.medias.reset')}}</el-button>
        </template> 
      </el-table-column>    
    </el-table> 
    <setForm id="2" v-show="show">       
       <template slot="boxTop">{{$t('message.medias.streampush')}}</template>
          <template slot="boxMain">                
            <el-row>
           <el-col :span="4" class="col4">  
              <div class="span3">            
                <label>{{$t('message.medias.url')}}</label>   
              </div>
              <div class="span3">            
                <label>{{$t('message.medias.reconnect')}}</label>   
              </div>                        
            </el-col>
            <el-col :span="20" class="col20a1">
              <div class="span17">
                <el-input  placeholder="" v-model="currentRow.url" ></el-input>
              </div>
              <div class="span17">
                <el-switch v-model="currentRow.reconnect"></el-switch>
              </div>
            </el-col>
          </el-row>
          <el-button  class="btnsave" @click="onSave">{{$t('message.save')}}</el-button>
          </template>
    </setForm>
   
  </div>
</template>

<script>
import { api } from "../../../../libs/api";
import setForm from "@/components/setForm";
import mylist from "@/components/MyList";
import ebus from "../../../../libs/ebus";
import { mapState } from "vuex";
import topTable from "../../../../components/topTable";
export default {
  created() {
    ebus.emit("getStremPushInfo", this);
  },
  computed: {
    ...mapState(["media"]),
    ...mapState(["system"])
  },
  data() {
    return {
      show: false,
      currentRow: {
        url: '',
        reconnect: false
      },
      streamPullData: [
        {
          id: 0,
          url: 'rtmp://192.168.1.1',
          reconnect: true,
          status: 'idle'
        },
        {
          id: 1,
          url: 'rtmp://192.168.1.2',
          reconnect: true,
          status: 'idle'
        },
        {
          id: 2,
          url: 'rtmp://192.168.1.3',
          reconnect: true,
          status: 'idle'
        },
        {
          id: 3,
          url: 'rtmp://192.168.1.4',
          reconnect: true,
          status: 'idle'
        },
        {
          id: 4,
          url: 'rtmp://192.168.1.5',
          reconnect: true,
          status: 'idle'
        },
        {
          id: 5,
          url: 'rtmp://192.168.1.6',
          reconnect: true,
          status: 'idle'
        }
      ]
    };
  },
  components: {
    setForm,
    mylist,
    topTable
  },
  methods: {
    handleCurrentChanges(val, index) {
      for (var key in val) {
        this.currentRow[key] = val[key];
      }
      this.show = true
    },
    onSave() {
      if (
        this.errors.has(this.$t('message.medias.resolution')) ||
        this.errors.has(this.$t("message.medias.framerate")) 
      ) {
        return;
      }
      var option = {
        url: this.currentRow.url.trim(),
        reconnect: this.currentRow.reconnect        
      };
      api.onRequest(
        `$method.$set.${this.system.curTopic}.streamPush.ch.` + this.currentRow.index + ".dstCfg",
        JSON.stringify(option),
        null,
        null,
        function(message, reqReply) {
          var res = JSON.parse(message)
          if (res.code == 0) {  
            this.notification("Success", "");
          } else {
            this.showCodeMsg(res.code, this, res.msg);
          }          
          ebus.emit("getStremPushInfo", this);
        }.bind(this)
      );
    },
    onResetUrl(row) {
      var option = {
        url: '',
        reconnect: row.reconnect       
      };
      api.onRequest(
        `$method.$set.${this.system.curTopic}.streamPush.ch.` + row.index + ".dstCfg",
        JSON.stringify(option),
        null,
        null,
        function(message, reqReply) {
          var res = JSON.parse(message)
          if (res.code == 0) {  
            this.notification("Success", "");
            this.show = false
          } else {
            this.showCodeMsg(res.code, this, res.msg);
          }          
          ebus.emit('getStremPushInfo', this);   
        }.bind(this)
      );
    },
  }
};
</script>

<style scoped>
</style>

